<template>
  <div class="app-container">
    <el-row :gutter="25">
      <el-col :span="7" :xs="24">
        <el-card class="box-card" shadow="never">
          <el-skeleton :loading="loading" animated :count="1">
            <template #template>
              <el-skeleton-item variant="image" style="height: 267px;" />
              <div style="padding: 14px 0;">
                <el-skeleton-item variant="h3" style="display:flex;justify-items:flex-start; width: 50%;" />
                <div style="display: flex; align-items: center; justify-items: space-between; margin-top: 16px; height: 16px;">
                  <el-skeleton-item variant="text" style="margin-right: 16px;" />
                  <el-skeleton-item variant="text" style="width: 30%;" />
                </div>
              </div>
            </template>
            <template #default>
              <div>
                <div class="text-center">
                  <userAvatar :user="user" />
                </div>
                <el-row>
                  <el-col :span="24" class="profile-nickName">
                    <div>{{ user.nickName }}</div>
                  </el-col>
                  <el-col v-if="user.dept" :span="24" style="font-size:14px;">
                    <div>{{ user.dept.deptName || 'XX部门' }} / {{ postGroup || 'XX分组' }}</div>
                  </el-col>
                </el-row>
                <ul class="list-group list-group-striped">
                  <li class="list-group-item">
                    <i class="el-icon-user" />
                    <div class="pull-right">{{ user.userName }}</div>
                  </li>
                  <li class="list-group-item">
                    <i class="el-icon-mobile-phone" />
                    <div class="pull-right">{{ user.phonenumber }}</div>
                  </li>
                  <li class="list-group-item">
                    <i class="el-icon-edit" />
                    <div class="pull-right">{{ user.email }}</div>
                  </li>
                  <li class="list-group-item">
                    <i class="el-icon-monitor" />
                    <div class="pull-right">{{ roleGroup }}</div>
                  </li>
                  <li class="list-group-item">
                    <i class="el-icon-date" />
                    <div class="pull-right">{{ user.createTime }}</div>
                  </li>
                </ul>
              </div>
            </template>
          </el-skeleton>
        </el-card>
      </el-col>
      <el-col :span="17" :xs="24">
        <el-card shadow="never">
          <el-tabs v-model="activeTab">
            <el-tab-pane label="基本资料" name="userinfo">
              <userInfo :user="user" />
            </el-tab-pane>
            <el-tab-pane label="修改密码" name="resetPwd">
              <resetPwd :user="user" />
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import userAvatar from './userAvatar'
import userInfo from './userInfo'
import resetPwd from './resetPwd'
import { getUserProfile } from '@/api/system/user'

export default {
  name: 'Profile',
  components: { userAvatar, userInfo, resetPwd },
  data() {
    return {
      // 是否开启骨架屏
      loading: false,
      user: {},
      roleGroup: {},
      postGroup: {},
      activeTab: 'userinfo'
    }
  },
  created() {
    this.getUser()
  },
  methods: {
    getUser() {
      this.loading = true
      getUserProfile()
        .then((response) => {
          this.user = response.data
          this.roleGroup = response.roleGroup
          this.postGroup = response.postGroup
        })
        .finally(() => {
          this.loading = false
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  padding: 16px 24px;
  background-color: #f5f7f9;

  .box-card {
    text-align: center;

    .profile-nickName {
      color: rgba(0, 0, 0, 0.85);
      font-weight: 600;
      font-size: 17px;
      margin: 10px 0 0 0;
      line-height: 2.5;
    }
  }
}

::v-deep .el-card__body {
  padding: 24px !important;
}
</style>
